<template>
  <div id="billing_modify">
    <el-form label-width="100px" class="commonFrom">
      <el-form-item label="开票抬头：" style="margin-bottom: 12px !important">
        <el-select
          size="small"
          v-model.trim="fromValue.invoiceHeaderId"
          placeholder="请选择开票抬头"
          @change="billingChange"
        >
          <el-option v-for="item in billingOptions" :key="item.id" :label="item.rise" :value="item.id"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开票终端：" style="margin-bottom: 12px !important">
        <el-select size="small" v-model.trim="fromValue.invoiceTerminalId" placeholder="请选择开票终端">
          <el-option v-for="item in terminalOptions" :key="item.id" :label="item.invoiceTerminalCode" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发票类型：" style="margin-bottom: 3px">
        {{ fromValue.invoiceType | invoiceTypeFilter }}</el-form-item
      >
      <el-form-item label="总金额：" style="margin-bottom: 16px !important" required>
        <el-input size="small" placeholder="请输入总金额" v-model.trim="fromValue.totalPrice"> </el-input>
      </el-form-item>
    </el-form>
    <div class="tax_box">
      <div class="tax_btn">
        <el-button size="mini" class="exportBtn" @click="addTaxType"> 添加税目分类 </el-button>
        <el-button size="mini" class="exportBtn" @click="removeAll"> 清空清单 </el-button>
      </div>
      <el-table
        :data="fromValue.detailsList"
        class="table"
        border
        ref="jdjgTable"
        :header-cell-style="{
          padding: '0px',
          background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
        }"
        :row-class-name="tabRowClassName"
        header-row-class-name="mapTable_th"
      >
        <el-table-column label="编码" align="center" width="200" prop="itemCode"> </el-table-column>
        <el-table-column label="分类名称" align="center" width="180" prop="itemName"> </el-table-column>
        <el-table-column label="商品名" align="center" width="180" prop="goodsName"> </el-table-column>
        <el-table-column label="税率" align="center" width="80" prop="rate">
          <template slot-scope="scope">
            <div>{{ scope.row.rate }}{{ scope.row.rate ? '%' : '' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="金额" align="center" prop="amount">
          <template slot-scope="scope">
            <el-input
              v-model.trim="scope.row.amount"
              placeholder="请输入金额"
              size="small"
              ref="amount"
              @input="contractPriceCopy($event, scope.$index, 'amount')"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button type="text" class="ty czBtn" size="small" @click="taxClick(scope.$index, '删除')">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-button size="small" class="commonBtn" @click="closeBtn">取消</el-button>
      <el-button size="small" class="commonBtn1" @click="subBtn">确定</el-button>
    </div>
    <el-dialog
      width="800px"
      :center="true"
      title="添加税目分类"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="visiable"
      v-if="visiable"
    >
      <tax-type @close="close" :selected="fromValue.detailsList"></tax-type>
    </el-dialog>
  </div>
</template>

<script>
import taxType from './taxType.vue'
export default {
  components: { taxType },
  props: {
    settlementId: {
      type: [String, Number],
      require: true
    },
    invoiceType: {
      type: [String, Number],
      require: true
    }
  },
  name: 'BillingModify',
  data() {
    return {
      visiable: false,
      billingOptions: [],
      terminalOptions: [],
      fromValue: {
        settlementId: this.settlementId,
        invoiceType: this.invoiceType,
        invoiceTerminalId: '',
        invoiceHeaderId: '',
        totalPrice: '',
        detailsList: []
      }
    }
  },
  filters: {
    invoiceTypeFilter(val) {
      return val === 1 ? '增值税专用发票' : val === 2 ? '增值税普通发票' : '普通发票'
    }
  },
  mounted() {
    this.getBillingData()
  },
  methods: {
    contractPriceCopy(e, index, prop) {
      if (e) {
        if (!this.regMoney(e)) {
          this.fromValue.detailsList[index][prop] = 0
          this.$message.error('你输入的数量格式有误或超出范围,请重新输入')
        }
      }
    },
    // 校验金额方法
    regMoney(value) {
      return this.common.fieldTest('money', value)
    },
    closeBtn() {
      this.$emit('close')
    },
    close(val) {
      if (val && val.length) {
        val.forEach(item => {
          this.fromValue.detailsList.push({
            itemCode: item.itemCode,
            itemId: item.id,
            itemName: item.itemName,
            goodsName: item.goodsName,
            rate: item.rate,
            amount: null
          })
        })
      }
      this.visiable = false
    },
    subBtn() {
      // 判断标书内清单是否存在未填写数量以及单价的
      let inBidFlag = this.fromValue.detailsList.some(item => {
        return !item.amount
      })
      if (!this.fromValue.invoiceHeaderId) {
        this.$message.error('请选择开票抬头')
        return
      } else if (!this.fromValue.invoiceTerminalId) {
        this.$message.error('请选择开票终端')
        return
      } else if (!this.fromValue.totalPrice) {
        this.$message.error('请输入总金额')
        return
      } else if (!this.fromValue.detailsList.length) {
        this.$message.error('请添加税目分类')
        return
      } else if (inBidFlag) {
        this.$message.error('请输入税目分类金额')
        return
      }
      this.$https({
        method: 'post',
        url: '/invoice/addInvoice',
        data: this.fromValue
      })
        .then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.$emit('close', 'init')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    addTaxType() {
      this.visiable = true
    },
    taxClick(scope) {
      this.fromValue.detailsList.splice(scope, 1)
    },
    removeAll() {
      this.$confirm('是否清空清单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fromValue.detailsList.forEach(item => {
          item.amount = ''
        })
      })
    },
    billingChange(e) {
      this.getBillingTerminal(e)
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },
    // 获取开票抬头列表
    getBillingData() {
      this.$https({
        method: 'post',
        url: '/invoiceHeader/invoiceHeaderApproveList',
        data: {
          enterpriseId: localStorage.getItem('enterpriseId'),
          page: 1,
          size: 9999
        }
      })
        .then(res => {
          if (res.code == 0) {
            this.billingOptions = res.data.records
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取开票终端列表
    getBillingTerminal(e) {
      this.$https({
        method: 'post',
        url: '/invoiceTerminal/getList',
        data: {
          invoiceHeaderId: e
        }
      })
        .then(res => {
          if (res.code == 0) {
            this.terminalOptions = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
.commonFrom {
  margin-top: 7px;
  width: 88%;
  .el-form-item {
    width: 50% !important;
    margin-bottom: 7px !important;
    /deep/.el-input {
      width: 280px;
    }
  }
  .form-item {
    width: 100% !important;
    /deep/.el-form-item__content {
      display: flex;
    }
  }

  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
.tax_box {
  padding: 20px;
  border: 1px solid #d6d6d6;
  .tax_btn {
    margin-bottom: 10px;
  }
}
.footer {
  .commonBtn,
  .commonBtn1 {
    width: 130px;
  }
  text-align: center;
  margin-top: 40px;
}
</style>
